<template>
  <div>
        <table border="1">
          <tr>
            <th>序号</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
          <tr v-for="iphone in phone">
            <td>{{ iphone.id }}</td>
            <td>{{ iphone.name }}</td>
            <td>{{ iphone.price }}</td>
            <td><button v-bind:disabled="iphone.count == 0" v-on:click="iphone.count-=1">-</button>
              {{ iphone.count }}
              <button v-on:click="iphone.count+=1">+</button>

            </td>


            <td>
              <button v-on:click="iphone.count=0">移除</button>
            </td>

          </tr>
        </table>
        总价：￥{{cprice()}}
    </div>
</template>


<script>
    export default {
        name: "ts",
        data() {
            return {
                phone:[{
                    id:1,
                    name:'iphone 8',
                    price: 5099,
                    count:1
                },
                {
                    id:1,
                    name:'iphone xs',
                    price: 8699,
                    count:1
                },
                {
                    id:1,
                    name:'iphone xr',
                    price: 6499,
                    count:1
                }],
            }
        },
        methods:{
            cprice:function () {
                var cprice = 0;
                for (var i = 0 ,len = this.phone.length;i < len;i++){
                    cprice += this.phone[i].price * this.phone[i].count
                }
                return cprice;
            }
        }

    }
</script>

<style scoped>

</style>
